<template>
  <el-dialog title="批量策略管理" :visible.sync="strategydialog" width="40%" :before-close="cancel">
    <template>
      <el-form ref="ruleForm" :model="orderForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="选择策略">
          <el-select v-model="orderForm.policyId" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in strategyList"
              :key="item.policyId"
              :label="item.policyName"
              :value="item.policyId"
            />
          </el-select>
        </el-form-item>
        <div class="button">
          <div>
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="createdorder">确 定</el-button>
          </div>
        </div>
      </el-form>
    </template>
  </el-dialog>
</template>

<script>
import { policyAPI, ApplypolicyAPI } from '@/api/vm'
export default {
  props: {
    strategydialog: {
      type: Boolean,
      default: false
    },
    isSelected: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      orderForm: {
        policyId: ''
      },
      strategyList: []
    }
  },
  created() {
    this.getpolicy()
  },
  methods: {
    cancel() {
      this.$emit('update:strategydialog', false)
      this.$refs.ruleForm.resetFields()
    },
    async getpolicy() {
      const res = await policyAPI()
      //  console.log(res)
      this.strategyList = res.data
    },
    async createdorder() {
      await this.$refs.ruleForm.validate()
      const innerCodeList = []
      this.isSelected.forEach(item => {
        innerCodeList.push(item.innerCode)
      })
      await ApplypolicyAPI(innerCodeList, this.orderForm.policyId)
      this.$message.success('策略修改成功')
      this.$parent.getvmType()
      this.cancel()
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    margin-left: 100px;
}

.el-form {
    .button {
        display: flex;
        justify-content: center;
    }
}
</style>
